<template>
    <lay-card>
      <lay-form :model="unitForm" ref="layFormRef4" :label-position="labelPosition3" required>
        <lay-form-item label="编号">
          <lay-input v-model="unitForm.id" placeholder="新增可为空，自增ID" :disabled="disabledFlag"></lay-input>
        </lay-form-item>
        <lay-form-item label="分类" prop="target">
          <lay-input v-model="unitForm.target" placeholder="仅下拉列表分类可新增" :disabled="disabledFlag"></lay-input>
        </lay-form-item>
        <lay-form-item label="排序" prop="rowIndex">
          <lay-input v-model="unitForm.rowIndex" placeholder="同类参数值排序ID"></lay-input>
        </lay-form-item>
        <lay-form-item label="名称" prop="name">
          <lay-input v-model="unitForm.name" placeholder="参数名称" :disabled="disabledFlag"></lay-input>
        </lay-form-item>
        <lay-form-item label="取值" prop="value">
          <lay-input v-model="unitForm.value" placeholder="参数取值"></lay-input>
        </lay-form-item>
        <lay-form-item label="描述" prop="description">
          <lay-input v-model="unitForm.description" placeholder="参数说明"></lay-input>
        </lay-form-item>
        <lay-form-item style="text-align: center;">
          <lay-button type="normal" @click="submitParams" size="sm">提交</lay-button>
          <lay-button @click="cancelAction" size="sm">取消</lay-button>
        </lay-form-item>
      </lay-form>
    </lay-card>
</template>

<script lang="ts">
export default {
    name: "ConfigParams"
}
</script>

<script lang="ts" setup>
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {insertParamsApi, updateParamsApi, uploadFiles} from "../../api/market/basic";
import {notify} from "../../untils/tip";
import {layer} from "@layui/layui-vue";

const labelPosition3 = ref('right');
const layFormRef4 = ref();
const disabledFlag = ref(false);

// 定义调用父组件的操作方法
const emit = defineEmits(["cancel", "load"]);

const {operate, unitForm, loadData, cancelLay} = defineProps({
  operate: {type: String, default: 'update'},
  unitForm: {type: Array, default: reactive({
    id: null,
    target: null,
    rowIndex: null,
    name: null,
    value: null,
    description: null
  })
  },
  loadData: {type: Function},
  cancelLay: {type: Function}
});


onMounted(()=>{
  if(operate === 'update'){
    disabledFlag.value = true;
  }
})

const addParams = async () => {
  let {code, data, message} = await insertParamsApi(unitForm)
  if(code === 200){
    notify('success', message);
    loadData();
  }else {
    notify('fail', message);
  }
};

const updateParams = async () => {
  let {code, data, message} = await updateParamsApi(unitForm)
  if(code === 200){
    notify('success', message);
    loadData();
  }else {
    notify('fail', message);
  }
};

const submitParams = () => {
  if(operate === 'insert'){
    addParams();
  }else {
    updateParams();
  }
};

const cancelAction = () => {
  cancelLay();
};
</script>